<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统登录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">

    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#60a5fa',
                        accent: '#bfdbfe',
                        neutral: '#f1f5f9',
                        'neutral-dark': '#334155',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
                        'button': '0 4px 6px -1px rgba(59, 130, 246, 0.4), 0 2px 4px -1px rgba(59, 130, 246, 0.2)',
                        'button-hover': '0 10px 15px -3px rgba(59, 130, 246, 0.4), 0 4px 6px -2px rgba(59, 130, 246, 0.2)',
                    }
                },
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
            }
            .input-focus {
                @apply focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-300;
            }
            .scale-hover {
                @apply transition-transform duration-300 hover:scale-[1.02];
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter min-h-screen flex items-center justify-center p-4 overflow-x-hidden">
<!-- 背景装饰 -->
<div class="fixed -z-10 w-full h-full">
    <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-blue-50 to-white"></div>
    <div class="absolute -top-20 -right-20 w-96 h-96 bg-primary/10 rounded-full filter blur-3xl"></div>
    <div class="absolute -bottom-32 -left-32 w-96 h-96 bg-secondary/10 rounded-full filter blur-3xl"></div>
</div>

<!-- 登录卡片 -->
<div class="w-full max-w-md">
    <div class="bg-white rounded-2xl shadow-card overflow-hidden">
        <!-- 卡片头部 -->
        <div class="bg-gradient-primary p-8 text-white">
            <div class="flex items-center justify-center">
                <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-sm">
                    <i class="fa fa-user-md text-2xl"></i>
                </div>
            </div>
            <h2 class="text-2xl font-bold text-center mt-4">医疗系统登录</h2>
            <p class="text-center text-blue-100 mt-2">请输入账号密码登录系统</p>
        </div>

        <!-- 表单区域 -->
        <div class="p-8 space-y-6">
            <form th:action="@{/login}" method="post" class="space-y-5">
                <!-- 用户名 -->
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-500">
                        <i class="fa fa-user"></i>
                    </div>
                    <input type="text" id="username" name="account"
                           placeholder="请输入用户名" required
                           class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus">
                </div>

                <!-- 密码 -->
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-500">
                        <i class="fa fa-lock"></i>
                    </div>
                    <input type="password" id="password" name="pwd"
                           placeholder="请输入密码" required
                           class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus">
                </div>

                <!-- 角色选择 -->
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-500">
                        <i class="fa fa-users"></i>
                    </div>
                    <select id="role" name="role"
                            class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 appearance-none input-focus">
                        <option value="ADMIN">管理员</option>
                        <option value="DOCTOR">医生</option>
                        <option value="PATIENT">患者</option>
                    </select>
                    <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-500">
                        <i class="fa fa-chevron-down text-xs"></i>
                    </div>
                </div>

                <!-- 提示信息 -->
                <div class="ui success message" th:unless="${#strings.isEmpty(message)}">
                    <i class="close icon"></i>
                    <div class="header">提示：</div>
                    <p th:text="${message}"></p>
                </div>

                <!-- 登录按钮 -->
                <button type="submit"
                        class="w-full bg-primary text-white font-medium py-3 px-6 rounded-lg shadow-button hover:shadow-button-hover scale-hover flex items-center justify-center">
                    <i class="fa fa-sign-in-alt mr-2"></i>
                    立即登录
                </button>
            </form>

            <!-- 注册选项 -->
            <div class="flex items-center justify-center space-x-1 text-sm text-gray-500 mt-4">
                <span>还没有账号？</span>
                <a th:href="@{/insertPatient}"
                   class="text-primary font-medium hover:underline transition-colors duration-300"
                   style="animation: fadeInUp 0.5s ease forwards; animation-delay: 0.8s;">
                    立即注册
                </a>
            </div>

            <!-- 页脚信息 -->
            <div class="text-center text-gray-500 text-sm">
                <p>© 2023 医院信息系统 | 登录页</p>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script>
    // 消息关闭动画
    $(".message .close").on('click', function () {
        $(this).closest(".message").transition("fade");
    });

    // 淡入上滑动画函数
    function fadeInUp(element, delay) {
        element.style.opacity = '0';
        element.style.transform = 'translateY(10px)';
        setTimeout(() => {
            element.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
            element.style.opacity = '1';
            element.style.transform = 'translateY(0)';
        }, delay);
    }

    // 页面加载时触发动画
    document.addEventListener('DOMContentLoaded', function() {
        // 表单元素动画
        const formElements = document.querySelectorAll('input, select');
        formElements.forEach((el, index) => {
            el.style.opacity = '0';
            el.style.transform = 'translateY(10px)';
            setTimeout(() => {
                el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                el.style.opacity = '1';
                el.style.transform = 'translateY(0)';
            }, 100 * index);
        });

        // 注册链接动画
        const registerLink = document.querySelector('a[href="/register"]');
        if (registerLink) {
            fadeInUp(registerLink, 800); // 延迟0.8秒执行动画
        }
    });
</script>
</body>
</html>